<template>
  <div>
    <el-alert
      title="https://github.com/codemirror/CodeMirror、https://github.com/codemirror/CodeMirror/blob/master/addon/lint/json-lint.js"
      type="success" />
    <div class="editor-container">
      <div>
        <el-button-group>
          <el-button :type="theme==='dark'?'primary':''" @click="handleChangeTheme('dark')">Dark</el-button>
          <el-button :type="theme==='light'?'primary':''" @click="handleChangeTheme('light')">Light</el-button>
        </el-button-group>
      </div>
      <json-editor ref="jsonEditor" v-model="value" :theme="theme" />
    </div>
  </div>
</template>

<script>

const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'

export default {
  components: { },
  data() {
    return {
      theme: 'dark',
      value: JSON.parse(jsonData)
    }
  },
  methods: {
    handleChangeTheme(value) {
      this.theme = value
    }
  }
}
</script>

<style scoped>
.editor-container{
  position: relative;
  height: 100%;
}
</style>

